<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useHospitalStore } from '@/store/modules/hospital'
import { storeToRefs } from 'pinia'
import type { IBookingScheduleList } from '@/service/modules/hospital/type'

const $route = useRoute()
const $router = useRouter()
const hospitalStore = useHospitalStore()
const { bookingSheduleData, findScheduleList } = storeToRefs(hospitalStore)
// status : 0 有号  -1 停止挂号 1即将放号
// status : 0 & availableNumber ：-1 无号

const page = ref<number>(1)
const limit = ref<number>(7)
const hoscode = ref<string>('')
const depcode = ref<string>('')
// workDate
const workCurrent = ref<IBookingScheduleList>()
const workDate = ref<string>('')
// const docScheduleList = ref<IFindScheduleListArr>([])
// 发送网络请求
// 科室预约
const fetchHospitallWorkData = () => {
  hospitalStore.fetchHospitalWorkScheduleAction(
    page.value,
    limit.value,
    hoscode.value,
    depcode.value
  )
}
// 医生排班
const fetchWorkScheduleData = (config) => {
  hospitalStore.fetchFindScheduleListAction(config)
}

onMounted(() => {
  hoscode.value = $route.query.hoscode as string
  depcode.value = $route.query.depcode as string
  fetchHospitallWorkData()
  if (bookingSheduleData.value.bookingScheduleList[0]) {
    workDate.value = bookingSheduleData.value.bookingScheduleList[0].workDate
    workCurrent.value = bookingSheduleData.value.bookingScheduleList[0]
  } else {
    workCurrent.value = [] as any
  }

  const config = {
    hoscode: hoscode.value,
    depcode: depcode.value,
    workDate: workDate.value
  }
  fetchWorkScheduleData(config)
})

// time 分页
const handleCurrentChange = () => {
  fetchHospitallWorkData()
}

const timeItemClick = (item: any) => {
  workCurrent.value = item
  workDate.value = item.workDate
  fetchWorkScheduleData({
    hoscode: hoscode.value,
    depcode: depcode.value,
    workDate: workDate.value
  })
}
// 过滤数据：上午，下午
const moringSchedule = computed(() =>
  findScheduleList.value.filter((item) => item.workTime == 0)
)
const afternoonSchedule = computed(() =>
  findScheduleList.value.filter((item) => item.workTime == 1)
)
// 确认挂号
const goStepTwo = (doctor: any) => {
  if (workCurrent.value?.status == -1) {
    alert('停止挂号，不能预约')
  } else {
    $router.push({
      path: '/hospital/register/step2',
      query: {
        scheduleId: doctor.id
      }
    })
  }
}
</script>
<template>
  <div class="register_step">
    <div class="step1">
      <!-- 面包屑 -->
      <el-breadcrumb separator="|">
        <el-breadcrumb-item>{{
          bookingSheduleData.baseMap?.hosname
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          bookingSheduleData.baseMap?.bigname
        }}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- title -->
      <div class="schedule-class">
        <custom-title-v1
          :title="bookingSheduleData.baseMap?.depname"
        ></custom-title-v1>
      </div>
      <!-- time -->
      <div class="time-box">
        <!-- title -->
        <div class="time-title">
          {{ bookingSheduleData.baseMap?.workDateString }}
        </div>
        <div class="time-slider">
          <template
            v-for="item in bookingSheduleData.bookingScheduleList"
            :key="item.workDate"
          >
            <div
              class="time-item"
              :class="{
                nocode: item.status == -1 || item.availableNumber == -1
              }"
              @click="timeItemClick(item)"
            >
              <div class="item-title">
                <div class="date">{{ item.workDate }}</div>
                <div class="week">{{ item.dayOfWeek }}</div>
              </div>
              <div class="msg-code">
                <template v-if="item.status == -1"> 停止挂号 </template>
                <template v-if="item.status == 0">
                  {{
                    item.availableNumber == -1
                      ? '已约满'
                      : `有号(${item.availableNumber})`
                  }}
                </template>
                <template v-if="item.status == 1"> 即将放号 </template>
              </div>
            </div>
          </template>
        </div>
        <!-- 分页 -->
        <el-pagination
          layout="prev, pager, next"
          :total="bookingSheduleData.total"
          v-model:current-page="page"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- 号源信息 -->
      <div class="code-box">
        <template v-if="workCurrent?.status == 1">
          <div class="put-code">
            <!-- 即将放号 -->
            <div class="put-time">
              放号时间：<span class="time">08:30</span>
            </div>
            <div class="time-down">
              <span>倒计时</span>
              <span class="count-down">22时23分22秒</span>
            </div>
          </div>
        </template>

        <template v-else>
          <!-- 挂号：停止挂号；挂号 ；即将放号：放号时间：倒计时-->
          <div
            class="register-code"
            :class="{ stopcode: workCurrent?.status == -1 }"
          >
            <div class="code-item">
              <!-- title -->
              <custom-title-v4 title="上午号源" class="code-title">
                <template #icon>
                  <icon-morning></icon-morning>
                </template>
              </custom-title-v4>

              <!-- doctorlist -->
              <div class="doctor-list">
                <template v-for="item in moringSchedule" :key="item.id">
                  <div class="doctor-item">
                    <!-- 左：医生 -->
                    <div class="doctor-intro">
                      <div class="doctor-top">
                        <div class="doc-class">{{ item.title }}</div>
                        <div class="deliver"></div>
                        <div class="doc-name">{{ item.docname }}</div>
                      </div>
                      <div class="doctor-inro">
                        <p class="intro-text">
                          {{ item.skill }}
                        </p>
                      </div>
                    </div>
                    <!-- 右：预约 btn-->
                    <div class="order-box">
                      <div class="price">¥{{ item.amount }}</div>
                      <div class="btns">
                        <el-button class="leftbtn" @click="goStepTwo(item)"
                          >剩余({{ item.availableNumber }})</el-button
                        >
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div class="code-item">
              <!-- title -->
              <custom-title-v4 title="下午号源" class="code-title">
                <template #icon>
                  <icon-afternoon></icon-afternoon>
                </template>
              </custom-title-v4>
              <!-- doctorlist -->
              <div class="doctor-list">
                <template v-for="item in afternoonSchedule" :key="item.id">
                  <div class="doctor-item">
                    <!-- 左：医生 -->
                    <div class="doctor-intro">
                      <div class="doctor-top">
                        <div class="doc-class">{{ item.title }}</div>
                        <div class="deliver"></div>
                        <div class="doc-name">{{ item.docname }}</div>
                      </div>
                      <div class="doctor-inro">
                        <p class="intro-text">
                          {{ item.skill }}
                        </p>
                      </div>
                    </div>
                    <!-- 右：预约 btn-->
                    <div class="order-box">
                      <div class="price">¥{{ item.amount }}</div>
                      <div class="btns">
                        <el-button class="leftbtn" @click="goStepTwo(item)"
                          >剩余({{ item.availableNumber }})</el-button
                        >
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.register_step {
  .step1 {
    padding: 10px 0;
    .time-box {
      margin: 20px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      .time-title {
        padding: 15px 0;
      }
      .time-slider {
        display: flex;
        overflow: hidden;
        margin: 30px 0;
        width: 100%;
        .time-item {
          color: #4990f1;
          border: 1px solid #e8f2ff;

          margin: 0 7px;
          font-size: 14px;
          border-radius: 7px;
          cursor: pointer;
          &:hover {
            box-shadow: 0 10px 20px -10px rgba(73, 144, 241, 0.8);
          }
          &.active {
            font-weight: 900;
            color: #fff;
            border: 1px solid #4990f1;
            .item-title {
              background: #4990f1;
            }
          }
          &.nocode {
            color: #807e7e;
            cursor: no-drop;
            border: 1px solid #eee;
            .item-title {
              background: #eee;
            }
            &:hover {
              box-shadow: none;
            }
          }
          &.stop {
            color: #fff;
            .item-title {
              background: #4990f1;
            }
          }
          .item-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #e8f2ff;
            padding: 10px 7px;
            letter-spacing: 0;
          }
          .msg-code {
            text-align: center;
            padding: 15px 0;
            letter-spacing: 2px;
            font-weight: 500;
          }
        }
      }
    }
    .code-box {
      margin: 20px 0;
      .register-code {
        &.stopcode {
          .btns {
            .leftbtn {
              background-color: #333 !important;
              cursor: no-drop !important;
              box-shadow: 0 10px 20px -10px rgba(73, 144, 241, 0.5);
            }
          }
        }
        .code-item {
          width: 100%;

          .code-title {
            margin: 20px 0;
          }
          .doctor-list {
            .doctor-item {
              display: flex;
              justify-content: space-between;
              .doctor-intro {
                .doctor-top {
                  margin: 15px 0;
                  display: flex;
                  .doc-class,
                  .doc-name {
                    color: #333;
                    font-size: 14px;
                    font-weight: 700;
                  }
                  .deliver {
                    width: 1px;
                    height: auto;
                    margin: 0 10px;
                    background-color: #ddd;
                  }
                }
                .doctor-inro {
                  margin: 20px 0;
                  .intro-text {
                    color: #999;
                    font-weight: 700;
                    line-height: 25px;
                    padding-right: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                  }
                }
              }
              .order-box {
                display: flex;
                align-items: center;
                .price {
                  letter-spacing: 1px;
                  color: #4990f1;
                  font-weight: 700;
                  margin-right: 20px;
                }
                .btns {
                  width: 140px;
                  .leftbtn {
                    justify-content: center;
                    align-items: center;
                    background-color: #4490f1;
                    box-shadow: 0 10px 20px -10px rgba(73, 144, 241, 0.5);
                    border-radius: 4px;
                    height: 44px;
                    color: #fff;
                    font-size: 16px;
                    font-weight: 700;
                    transition: all 0.2s ease;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    cursor: pointer;
                    width: inherit;
                    &:hover {
                      background-color: blue;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .put-code {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 16px;
        .put-time {
          .time {
            color: #4990f1;
          }
        }
        .time-down {
          color: #999;
          letter-spacing: 3px;
          .count-down {
            margin-left: 24px;
            font-weight: 700;
            font-size: 30px;
            letter-spacing: 1px;
            color: #4990f1;
          }
        }
      }
    }
  }
}
</style>
